<template>
  <div>
    <el-container>
      <el-aside :style="{ width: asideWidth }">
        <el-menu
          :style="{ width: asideWidth01 }"
          :default-active="currentActive"
          class="el-menu-vertical-demo"
          @select="handleMenuSelect"
          :collapse="isCollapse"
          background-color="#545c64"
          text-color="#fff"
          active-text-color="#ffd04b"
          :collapse-transition="true"
        >
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">首页</span>
          </el-menu-item>
          <el-submenu index="2">
            <template slot="title">
              <i class="el-icon-cpu"></i>
              <span>WeChatAI</span>
            </template>
            <el-menu-item-group>
              <el-menu-item index="2-1">
                <i class="el-icon-chat-dot-round"></i>微信AI</el-menu-item
              >
              <el-menu-item
                index="2-2"
                disabled
              >
                <i class="el-icon-chat-dot-round"></i>QQAI</el-menu-item
              >
            </el-menu-item-group>
          </el-submenu>
          <el-menu-item index="3">
            <i class="el-icon-document"></i>
            <span slot="title">账号管理</span>
          </el-menu-item>
          <el-menu-item index="4">
            <i class="el-icon-setting"></i>
            <span slot="title">设置</span>
          </el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="display: flex">
          <h1
            class="toicp"
            style="width: 400px; font-style: italic"
          >
            Hi, {{ username }}
          </h1>
          <el-button
            plain
            icon="el-icon-s-unfold"
            class="header-button"
            v-model="isCollapse"
            @click="header_button"
          ></el-button>
        </el-header>
        <el-main>
          <!-- 标签1 echarts图形 -->
          <div
            v-if="currentActive == '1'"
            style="display: flex"
          >
            <div style="width: 350px; height: 510px; padding: 10px">
              <div
                class="my-echarts"
                style="
                  display: flex;
                  width: 350px;
                  height: 150px;
                  margin-bottom: 20px;
                "
              >
                <div
                  class="outer-container"
                  style="width: 140px; height: 150px"
                >
                  <img
                    class="inner-circle"
                    style="width: 100px; height: 100px; border-radius: 50%"
                    :src="userimageulr"
                  />
                  <span class="inner-circle01">{{ this.UserIdentity }}</span>
                </div>
                <div
                  class="my-time"
                  style="width: 210px; height: 150px"
                >
                  <div>
                    <span>上次登录时间： {{ this.userlogintime }}</span>
                  </div>
                  <div>
                    <span>上次登录地区： {{ this.Loginregion }}</span>
                  </div>
                </div>
              </div>
              <div
                class="my-echarts"
                style="width: 350px; height: 350px"
              >
                <div
                  style="
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    font-weight: 700;
                  "
                >
                  用户请求信息
                </div>
                <el-table
                  :data="tableData"
                  border
                  style="font-size: 10px"
                  max-height="340"
                  size="mini"
                  :header-row-style="{ height: '50px' }"
                >
                  <el-table-column
                    prop="userid"
                    label="用户id"
                    width="80"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="name"
                    label="姓名"
                    width="80"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="date"
                    label="时间"
                    width="80"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="msg"
                    label="内容"
                    width="80"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="msgstatus"
                    label="请求状态"
                    width="80"
                  >
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <div style="width: 640px; height: 500px; padding: 10px">
              <div style="width: 700px; height: 200px; margin-bottom: 20px">
                <div
                  id="my-echarts"
                  class="my-echarts"
                  style="width: 640px; height: 200px"
                ></div>
              </div>
              <div style="display: flex">
                <!-- 饼图 -->
                <div
                  id="my-echarts01"
                  class="my-echarts"
                  style="width: 510px; height: 300px; margin-right: 10px"
                ></div>
                <!-- 柱状图 -->
                <div
                  id="my-echarts02"
                  class="my-echarts"
                  style="width: 470px; height: 300px"
                ></div>
              </div>
            </div>
          </div>

          <!-- 2-1 -->
          <!-- 外层 -->
          <div v-if="currentActive == '2-1'">
            <!-- 第一行 -->
            <div class="main-2-1-First_line">
              <div style="width: 500px; height: 500px">
                <div
                  class="my-echarts"
                  style="margin: 20px"
                >
                  <div
                    style="
                      display: flex;
                      justify-content: center;
                      align-items: center;
                    "
                  >
                    <img
                      v-if="logonstatus"
                      src="https://login.weixin.qq.com/qrcode/IYfntr5aLQ=="
                      alt=""
                      width="150"
                      height="150"
                    />
                    <el-empty
                      v-else
                      :image-size="20"
                      description="请先登录！"
                    >
                      <el-button
                        size="mini"
                        type="primary"
                        round
                        @click="logonstatusclick"
                        >获取登录二维码</el-button
                      >
                    </el-empty>
                  </div>
                  <el-divider></el-divider>
                  <div class="">
                    <el-button
                      size="mini"
                      type="info"
                      @click="logonstatusclick"
                      >重新获取二维码</el-button
                    >
                    <el-button
                      size="mini"
                      type="danger"
                      @click="logonstatusclick"
                      >注销登录！</el-button
                    >
                  </div>
                </div>
                <div
                  style="
                    display: flex;
                    margin-top: 20px;
                    margin-left: 20px;
                    margin-right: 20px;
                  "
                >
                  <div
                    class="my-echarts"
                    style="
                      width: 220px;
                      height: 200px;
                      margin-right: 20px;
                      background-color: #7290f3; /* 设置黑名单的背景颜色 */
                      padding: 10px; /* 添加内边距以改变背景颜色范围 */
                    "
                  >
                    <h1 style="color: #0a2192; font-size: 16px">黑名单管理</h1>

                    <el-divider></el-divider
                    ><el-statistic
                      group-separator=","
                      :value="Blacklist"
                      :title="title"
                      style="color: #ff0000; font-size: 18px"
                    >
                    </el-statistic>
                  </div>
                  <div
                    class="my-echarts"
                    style="
                      width: 220px;
                      height: 200px;
                      background-color: #e0f7fa; /* 设置白名单的背景颜色 */
                      padding: 10px; /* 添加内边距以改变背景颜色范围 */
                    "
                  >
                    <h1 style="color: #00acc1; font-size: 16px">白名单管理</h1>

                    <el-divider></el-divider>
                    <el-statistic
                      group-separator=","
                      :value="Whitelist"
                      :title="title"
                      style="color: #009688; font-size: 18px"
                    ></el-statistic>
                  </div>
                </div>
              </div>

              <div class="friend-group-list-container">
                <span class="list-title">用户好友群聊列表</span>
                <el-table
                  :data="Friendsgroupchatlist"
                  style="width: 500px"
                  :row-class-name="tableRowClassName"
                  class="friend-group-table"
                >
                  <el-table-column
                    fixed
                    prop="name"
                    label="名称"
                    width="150"
                  >
                  </el-table-column>
                  <el-table-column
                    prop="type"
                    label="类型"
                    width="70"
                  >
                  </el-table-column>

                  <el-table-column
                    fixed="right"
                    label="管理"
                    width="170"
                  >
                    <template slot-scope="scope">
                      <el-button
                        @click.native.prevent="
                          deleteRow(scope.$index, tableData)
                        "
                        type="text"
                        size="small"
                      >
                        移入白名单
                      </el-button>
                      <el-button
                        @click.native.prevent="
                          deleteRow(scope.$index, tableData)
                        "
                        type="text"
                        size="small"
                      >
                        移入黑名单
                      </el-button>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
          </div>

          <div v-if="currentActive == '3'">
            <el-radio-group
              v-model="radio"
              size="small"
            >
              <el-radio-button label="用户ID"></el-radio-button>
              <el-radio-button label="用户身份"></el-radio-button>
              <el-radio-button label="注册时间"></el-radio-button>
              <el-radio-button label="查询所有"></el-radio-button>
              <el-row>
                <el-input
                  placeholder="请输入查询的内容"
                  :disabled="radio === '查询所有'"
                  prefix-icon="el-icon-search"
                  v-model="input"
                  clearable
                  style="width: 300px"
                >
                </el-input>
                <el-button
                  icon="el-icon-search"
                  circle
                  type="primary"
                  :disabled="input.length == 0 && radio != '查询所有'"
                >
                </el-button>
              </el-row>
            </el-radio-group>

            <el-table
              :data="tableData01"
              style="width: 100%"
            >
              <el-table-column
                prop="date"
                label="用户ID"
                width="150"
              >
              </el-table-column>
              <el-table-column
                prop="name"
                label="姓名"
                width="120"
              >
              </el-table-column>
              <el-table-column
                prop="province"
                label="用户身份"
                width="120"
              >
              </el-table-column>

              <el-table-column
                prop="zip"
                label="注册时间"
                width="120"
              >
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作"
                width="120"
              >
                <template slot-scope="scope">
                  <el-button
                    @click.native.prevent="deleteRow(scope.$index, tableData)"
                    type="text"
                    size="small"
                  >
                    移除
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div
            class="setting"
            v-if="currentActive == '4'"
          >
            <div
              class="my-echarts"
              style="height: 600px"
            >
              <h1 style="margin: 20px">设置</h1>
              <el-divider></el-divider>
              <div style="margin: 20px">
                <el-switch
                  v-model="list"
                  @change="cilckList"
                  active-text="黑名单"
                  inactive-text="白名单"
                >
                </el-switch>
                <el-divider></el-divider>
                <h1>修改用户信息</h1>
                <el-button
                  type="info"
                  plain
                  @click="edit"
                  icon="el-icon-edit"
                  >修改用户昵称</el-button
                >
                <el-button
                  type="info"
                  plain
                  icon="el-icon-document-add"
                  @click="dialogVisible = true"
                  >修改用户头像</el-button
                >
                <el-dialog
                  title="提示"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="dialogVisiblehandleClose"
                >
                  <span>
                    <el-upload
                      action="http://localhost:8088/ordinary/userprofilepicture"
                      :on-success="handleSuccess"
                      :on-error="handleError"
                      name="file"
                      :data="uploadData"
                    >
                      <el-button
                        size="small"
                        type="primary"
                        >点击上传</el-button
                      >
                      <div
                        slot="tip"
                        class="el-upload__tip"
                      >
                        只能上传jpg/png文件
                      </div>
                    </el-upload>
                  </span>
                  <span
                    slot="footer"
                    class="dialog-footer"
                  >
                    <el-button
                      type="primary"
                      @click="dialogVisible = false"
                      >确 定</el-button
                    >
                  </span>
                </el-dialog>
                <el-divider></el-divider>
                <h1>设置触发AI词条</h1>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                >
                </el-input>
                <el-button
                  v-else
                  class="button-new-tag"
                  size="small"
                  @click="showInput"
                  style="margin: 20px"
                  >添加新的AI触发词条</el-button
                >
                <el-row style="margin: 5px"></el-row>
                <el-tag
                  :key="tag"
                  v-for="tag in dynamicTags"
                  closable
                  :disable-transitions="false"
                  @close="handleClose(tag)"
                >
                  {{ tag }}
                </el-tag>
                <el-divider></el-divider>
                <el-button
                  type="danger"
                  @click="logout"
                  >注销账号</el-button
                >
                <el-button
                  type="success"
                  @click="Switchaccount"
                  >切换账号</el-button
                >
              </div>
            </div>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  import axios from "axios";
  import * as echarts from "echarts";
  export default {
    mounted() {
      this.usertoken = this.$route.params.usertoken;
      this.uploadData.data = this.usertoken;
      console.log(this.usertoken);
      console.log("显示");
      this.show();
      axios
        .get("/ordinary/login/userinformation", {
          params: {
            usertoken: this.usertoken,
          },
        })
        .then((Response) => {
          this.list = Response.data.userinformation.blacklistandwhitelist;
          this.UserIdentity = Response.data.userinformation.useridentity;
          this.userlogintime = Response.data.userinformation.userlogintime;
          this.Loginregion = Response.data.userinformation.Wheretheuserloggedin;
          this.userimageulr = Response.data.userinformation.userimageulr;
          this.dynamicTags = Response.data.userinformation.aiglossary;
          this.username = Response.data.userinformation.useraccountnumber;
        })
        .catch((error) => {
          this.$notify.error({
            title: "错误",
            message: response.data.message,
          });
        });
    },
    watch: {
      currentActive(newVal, oldVal) {
        console.log("currentActive 发生变化", newVal, oldVal);
        if (newVal === "1") {
          this.show();
        }
      },
    },

    data() {
      return {
        uploadData: {
          data: "",
        },
        dialogVisible: false,
        userimageulr: "",
        usertoken: "",
        list: true,
        title: "数量",
        Blacklist: 123,
        Whitelist: 10,
        logonstatus: false,
        input: "",
        isCollapse: false,
        username: "",
        currentActive: "1",
        UserIdentity: "",
        userlogintime: "",
        Loginregion: "",
        radio: "学号",
        tableData: [
          {
            userid: "123456",
            date: "2016-05-03",
            name: "王小虎",
            msg: "你是谁？",
            msgstatus: "200",
          },
        ],
        tableData01: [
          {
            date: "2016-05-03",
            name: "王小虎",
            province: "上海",
            city: "普陀区",
            address: "上海市普陀区金沙江路 1518 弄",
            zip: 200333,
          },
        ],
        Friendsgroupchatlist: [
          {
            name: "秋",
            type: "friend",
          },
          {
            name: "一家人",
            type: "group",
          },
          {
            name: "golang交流群",
            type: "group",
          },
          {
            name: "佳",
            type: "friend",
          },
        ],
        dynamicTags: [""],
        inputVisible: false,
        inputValue: "",
      };
    },
    methods: {
        logonstatusclick() {
        if (this.logonstatus == true) {
          this.logonstatus = false;
        } else {
          this.logonstatus = true;
        }
      },
      Switchaccount() {
        this.$router.push({ path: "/" });
      },
      logout() {
        axios
          .get("/ordinary/Cancelaccount", {
            params: {
              usertoken: this.usertoken,
            },
          })
          .then((response) => {
            console.log(response);
            if (response.data.codetype == 1) {
              this.$notify({
                title: "成功",
                message: response.data.message,
                type: "success",
              });
              this.$router.push({ path: "/" });
            } else {
              this.$notify.error({
                title: "错误",
                message: response.data.message,
              });
            }
          })
          .catch((error) => {
            this.$notify.error({
              title: "错误",
              message: error,
            });
          });
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
        console.log(this.dynamicTags);
        axios
          .get("/ordinary/triggerword", {
            params: {
              usertoken: this.usertoken,
              inputvalue: this.dynamicTags.join(" "),
              type: 2,
            },
          })
          .then((response) => {
            console.log(response);
            if (response.data.codetype == 1) {
              this.$notify({
                title: "成功",
                message: response.data.message,
                type: "success",
              });
            } else {
              this.$notify.error({
                title: "错误",
                message: response.data.message,
              });
            }
          })
          .catch((error) => {
            this.$notify.error({
              title: "错误",
              message: error,
            });
          });
      },
      handleInputConfirm() {
        let inputValue = this.inputValue.replace(/\s/g, "");
        if (!this.dynamicTags.includes(inputValue) && inputValue != "") {
          axios
            .get("/ordinary/triggerword", {
              params: {
                usertoken: this.usertoken,
                inputvalue: inputValue,
                type: 1,
              },
            })
            .then((response) => {
              console.log(response);
              if (response.data.codetype == 1) {
                this.$notify({
                  title: "成功",
                  message: response.data.message,
                  type: "success",
                });
              } else {
                this.$notify.error({
                  title: "错误",
                  message: response.data.message,
                });
              }
            })
            .catch((error) => {
              this.$notify.error({
                title: "错误",
                message: error,
              });
            });
          this.dynamicTags.push(inputValue);
        } else {
          this.$notify.error({
            title: "错误",
            message: "格式错误或者重复值！",
          });
        }

        this.inputVisible = false;
        this.inputValue = "";
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick((_) => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      cilckList() {
        axios
          .get("/ordinary/list", {
            params: {
              usertoken: this.usertoken,
              list: this.list,
            },
          })
          .then((response) => {
            console.log(response);
            if (response.data.codetype == 1) {
              this.$notify({
                title: "成功",
                message: response.data.message,
                type: "success",
              });
            } else {
              this.$notify.error({
                title: "错误",
                message: response.data.message,
              });
            }
          })
          .catch((error) => {
            this.$notify.error({
              title: "错误",
              message: error,
            });
          });
      },
      handleSuccess(response) {
        this.userimageulr = response.usertoken;
        // 在这里处理文件上传成功的逻辑
      },
      handleError(error) {
        this.$notify.error({
          title: "错误",
          message: error,
        });
      },
      dialogVisiblehandleClose(done) {
        this.$confirm("确认关闭？")
          .then((_) => {
            done();
          })
          .catch((_) => {});
      },
      edit() {
        this.$prompt("请输入昵称", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          inputPattern: /\S+/,
          inputErrorMessage: "内容不能为空！",
        })
          .then(({ value }) => {
            axios
              .get("/ordinary/edit", {
                params: {
                  usertoken: this.usertoken,
                  username: value,
                },
              })
              .then((response) => {
                if (response.data.codetype == 1) {
                  this.username = value;
                  this.$notify({
                    title: "成功",
                    message: response.data.message,
                    type: "success",
                  });
                } else {
                  this.$notify.error({
                    title: "错误",
                    message: response.data.message,
                  });
                }
              })
              .catch((error) => {
                this.$notify.error({
                  title: "错误",
                  message: response.data.message,
                });
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "取消输入",
            });
          });
      },

      tableRowClassName({ row }) {
        // 根据 row 中的 type 字段的值返回不同的类名
        if (row.type === "group") {
          return "group-chat";
        } else if (row.type === "friend") {
          return "friend";
        }
        return "";
      },
    
      header_button() {
        if (this.isCollapse) {
          this.isCollapse = false;
        } else {
          this.isCollapse = true;
        }
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },

      asideWidth() {
        console.log("测试01");
        return this.isCollapse ? "64px" : "200px";
      },
      asideWidth01() {
        console.log("测试");
        return this.isCollapse ? "64px" : "200px";
      },
      show() {
        console.log("显示");
        this.main_echarts();
      },
      handleMenuSelect(index) {
        this.currentActive = index;
        console.log("当前是标签：" + this.currentActive);
      },

      main_echarts() {
        //请求表
        setTimeout(() => {
          const charts = document.querySelector("#my-echarts");

          const charts01 = document.querySelector("#my-echarts01");
          const charts02 = document.querySelector("#my-echarts02");
          var myChart = echarts.init(charts);
          var myChart01 = echarts.init(charts01);
          var myChart02 = echarts.init(charts02);

          myChart.setOption({
            title: {
              text: "Stacked Line",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["Email", "Union Ads"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            toolbox: {
              feature: {
                saveAsImage: {},
              },
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "Email",
                type: "line",
                stack: "Total",
                data: [120, 132, 101, 134, 90, 230, 210],
              },
              {
                name: "Union Ads",
                type: "line",
                stack: "Total",
                data: [220, 182, 191, 234, 290, 330, 310],
              },
            ],
          });

          // 绘制图表
          myChart01.setOption({
            title: {
              text: "请求分布图",
              left: "center",
              textStyle: {
                color: "rgba(28, 236, 201, 1)",
                fontSize: 1,
              },
            },
            tooltip: {
              trigger: "item",
            },
            legend: {
              orient: "vertical",
              left: "left",
            },
            series: [
              {
                name: "次数",
                type: "pie",
                radius: "50%",
                data: [
                  { value: 580, name: "总请求次数" },
                  { value: 484, name: "GPTAI请求次数" },
                  { value: 300, name: "天气请求次数" },
                ],
              },
            ],
          });
          myChart02.setOption({
            legend: {},
            tooltip: {},
            dataset: {
              source: [
                ["product", "GPTAI", "天气"],
                ["白天", 43.3, 10],
                ["晚上", 83.1, 73.4],
              ],
            },
            xAxis: { type: "category" },
            yAxis: {},
            series: [{ type: "bar" }, { type: "bar" }],
          });
        }, 100);
      },
    },
  };
</script>
<style>
  * {
    padding: 0px;
  }

  .main-img {
    border: 1px solid red;
    height: 150px;
    width: 150px;
  }
  .header-button {
    color: inherit;
    display: flex;
    margin-left: auto;
    right: 10px;
    background-color: transparent;
    border: none;
    height: 60px;
  }
  .el-aside {
    height: 100%;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;

    border: 1px solid #000;
    padding: 0px;
    height: 490px;
  }
  .el-header {
    background-image: url(../assets/preview.jpg);
    background-size: cover;
    padding: 0px;
  }
  body > .el-container {
    margin-bottom: 40px;
  }

  .el-menu-vertical-demo {
    height: 550px;
  }
  .el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 150px;
  }
  .main-2-1-First_line {
    display: flex;
    height: 500px;
  }

  .my-echarts {
    background-color: white; /* 白色背景 */
    border: 1px solid rgb(2, 1, 1); /* 圆角边框，边框颜色为黑色 */
    border-radius: 10px; /* 圆角半径，根据需要调整 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 黑色阴影，根据需要调整阴影的大小和颜色 */
  }
  .outer-container {
    position: relative;
  }

  .inner-circle {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
  }
  .inner-circle01 {
    position: absolute;
    top: 85%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    font-size: 13px;
  }
  .my-time {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    align-items: flex-start;
  }

  .my-echarts > div {
    margin-bottom: 10px;
    font-size: 13px;
  }
  .setting {
    border: 1px solid red;
    width: 1030px;
    height: 470px;
    margin: 5px;
    background-color: rgb(247, 247, 247);
  }
  .el-table .group-chat {
    background: oldlace;
  }

  .el-table .friend {
    background: #f0f9eb;
  }

  .friend-group-list-container {
    width: 650px;
    height: 480px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 20px; /* 调整顶部间距 */
    background-color: white; /* 白色背景 */
    border: 1px solid rgb(2, 1, 1); /* 圆角边框，边框颜色为黑色 */
    border-radius: 10px; /* 圆角半径，根据需要调整 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); /* 黑色阴影，根据需要调整阴影的大小和颜色 */
  }

  .list-title {
    font-size: 18px;
    margin-bottom: 10px;
  }

  .friend-group-table {
    margin-top: 10px; /* 调整表格与标题之间的间距 */
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
